<template>
  <dt-modal-edit ref="edit" :title="title" :width="500" @ok="onOk" @cancelData="cancelData" :okText="okText">
    <div class="radioGroupClassBox" ref="radioGroupClassBox">
      <RadioGroup v-model="chooseTask" ref="radioGroup" vertical class="radioGroupClass">
        <Radio v-for="(item, index) in taskData" :key="index" :label="item.key" class="radioClass">
          {{ item.value }}
        </Radio>
      </RadioGroup>
    </div>
  </dt-modal-edit>
</template>

<script>
  export default {
    data() {
      return {
        okText: '确定',
        title: '请选择需要将任务移动至的分类',
        taskData: [],
        chooseTask: '',
        fromSource: ''
      }
    },
    methods: {
      onOk() {
        let chooseCurr = this.taskData.find((item) => {
          if (item.key == this.chooseTask) {
            return item
          }
        })
        if (chooseCurr) {
          chooseCurr.fromSource = this.fromSource
          this.$emit('chooseTask', chooseCurr)
        } else {
          this.$Message.warning('请完成选择')
        }

        if (this.fromSource != 'ImportSettings') {
          this.$refs.edit.hide()
        }
      },

      show(fromVal, dataList, currentChoose) {
        console.log(fromVal, 'fromVal')
        this.chooseTask = String(currentChoose)
        this.fromSource = fromVal

        if (fromVal == 'ImportSettings') {
          this.taskData = dataList
          this.title = '请选择需从哪个SOP任务中导入设置'
          this.okText = '下一步'
        } else if (fromVal == 'processList') {
          this.taskData = dataList
          this.title = '请选择需要与当前任务关联的“审批流”'
        } else if (fromVal == 'org') {
          this.taskData = dataList
          this.title = '请选择需要切换的“审批流”组织范围'
        } else {
          this.taskData = dataList
          this.title = '请选择需要将任务移动至的分类'
        }

        this.$refs.edit.show()
        // this.handleChange(currentChoose)

        let childIndex = this.taskData.findIndex((item) => {
          return item.key == this.chooseTask
        })
        this.$nextTick(function () {
          this.$refs.radioGroupClassBox.scrollTop = 50 * childIndex + 16
        })
      },
      cancelData() {
        this.taskData = []
      },
      hide() {
        this.$refs.edit.hide()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .radioGroupClassBox {
    max-height: 400px;
    overflow-y: auto;

    .radioGroupClass {
      display: block;
      width: 100%;
    }

    .radioClass {
      border-bottom: 1px solid #e8eaec;
      display: block;
      padding: 10px 10px 40px;
    }

    .radioClass:last-child {
      border: none;
    }
  }
</style>
